<template>
	<div class="add-FlowDesign-container">
		<el-dialog title="编辑流程图" v-model="isShowDialog" :fullscreen="true">
			<bpmn-modeler ref="refNode" :xml="ruleForm.xml" :is-view="isView" @save="save" :create-flag="false" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import bpmnModeler from '/@/components/bpmn/index'
import { reactive, toRefs, defineExpose } from 'vue';
import { update, FlowDesign } from '/@/api/flow/flowDesign';
const state = reactive({
	isShowDialog: false,
	isView: false,
	ruleForm: {
		id: 0, // id
		flowId: '', // 流程id
		name: '', // 流程名称
		xml: '', // xml
		svg: '', // svg
	} as FlowDesign,
});
// 打开弹窗
const openDialog = (row: any, isView: boolean = false) => {
	state.ruleForm = row;
	state.isShowDialog = true;
	state.isView = isView
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// // 取消
// const onCancel = () => {
// 	closeDialog();
// };
// 保存
const save = (data: FlowDesign) => {
	console.log('update', data);
	state.ruleForm = Object.assign(state.ruleForm, data)
	update(state.ruleForm).then(() => {
		closeDialog();
	})
};

const { isShowDialog, ruleForm, isView } = toRefs(state)

defineExpose({
	openDialog,
})
</script>
